<template>
  <div class="newsCenter">
    <Header @modify="modify" @naviBack="naviBack" :title="title" :flag="flag" :title2="title2"></Header>
    <Alarm :alarm="alarm" @cancel="cancel"  @confirm="confirm"  v-if="showAlarm"></Alarm>
    <div class="formContent">
      <form action="" onsubmit="return false">
        <div class="textarea ">
          <div class="label">
            反馈内容：
          </div>
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea autofocus="autofocus" class="weui-textarea reportContent" id="textarea" @keyup="count" v-model="text">

                </textarea>
                <div class="weui-textarea-counter" style="font-size: 14px;">
                  （剩余 <span class="num" id="num">{{num}}</span>字）
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="submit">
          <input type="submit" value="提交反馈" @click.stop="commit">
        </div>
      </form>
    </div>
    <div class="tips" v-if="tips">
      <span>{{tipsHtml}}</span>
    </div>
  </div>
</template>
<script>
  import Header from './userheader.vue'
  import Alarm from './alarm.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        title:'意见反馈',
        flag:false,
        title2:'',
        text:'',
        tips:false,
        tipsHtml:'',
        num:200,
        defaultId:0,
        text:'',
        showAlarm:false,
        alarm:''
      }
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid||localStorage.getItem('uid')
      })
    },
    methods:{
      naviBack(){
        this.$router.go(-1)
      },
      modify (){

      },

      cancel(){
        this.showAlarm =false
      },
      confirm (){
        this.showAlarm =false
        if(this.text.length){
            console.log( this.$router)
          this.$router.push({
            name:'userCenter'
          })
        }
      },
      commit (){
          let that =this
          console.log(this.text.length)
        if(!this.text.length){
            this.alarm ='提交的内容不能为空'
            this.showAlarm =true
        }else{
            console.log(this.text)
            this.axios.post('/home/User/advice',{
                uid:this.uid,
               content:this.text,
            })
              .then((res=>{
                  if(res.data.code==1){
                      this.tips =true
                    this.tipsHtml =res.data.msg
                    setTimeout(function () {
                        that.tips =false
                      that.$router.push({
                        path:'/userCenter'
                      })
                    },1500)

                  }else{
                    this.alarm =res.data.msg
                    this.showAlarm =true
                    this.text =''
                  }
              }))
//
        }
      },
      count(e){
        if(e.keyCode ==32){
          this.num = 200-this.text.length
          if(this.text.length>=200){
            e.preventDefault();
            this.text =this.text.substr(0,200);
            this.num =0
          }
        }else if(e.keyCode ==8){
          this.defaultId--;
          this.num  =200-this.text.length
        }else{
          this.defaultId++;
          this.num  =200-this.text.length
          if(this.text.length>=200){
            e.preventDefault();
            this.text =this.text.substr(0,200);
            this.num =0;
          }
        }
      },
    },
    components:{
      Header,
      Alarm
    },
    mounted () {

    }
  })
</script>
<style scoped>
  .newsCenter{
    background: #fff;
    height: 100%;
  }
  .formContent{
    margin:  0 0.32rem;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    margin-top: 0.55rem;
  }
  .textarea{
    background: #f8f8f8;
  }
  .textarea textarea{
    width: 100%;
    height: 150px;
    background: #f8f8f8;
  }
  .submit{
    position: fixed;
    left: 0;
    right: 0;
    max-width:750px;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
    margin: 0 auto;
    text-align: center}
  .submit input{
    display: inline-block;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    border: none;
    outline: none;
    font-size: 0.32rem;
    color: white;
  }
  .weui-cells{
    background: #f8f8f8;
    margin-top: 0;
  }
  .weui-cell{
    padding-top: 2px;

  }
  .textarea  .label{
    font-size: 0.28rem;
    margin-left: 0.3rem;
    line-height: 0.6rem;
  }
  .weui-cells:before{
    border-top:0
  }
</style>
